<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>layabox</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./assets/css/animate.min.css" />
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/header.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
</head>
<body>
    <!-- 头部 -->
    <header class="header wow fadeIn">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
              <!-- 移动端导航 -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand logo" href="javascript:void(0)">
                    <img src="./assets/images/logo.png" />
                </a>
              </div>
          
              <!-- 导航条 -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!-- 导航内容 -->
                <ul class="menu nav navbar-nav">
                  <li class="active"><a href="#" data-lang="menu1">首页</a></li>
                  <li><a href="#layaflash" data-url="layaflash" data-lang="menu2">Laya引擎</a></li>
                  <li><a href="#layabox" data-url="layabox" data-lang="menu3">Laya优势</a></li>
                  <li><a href="#layaboxwork" data-url="layaboxwork" data-lang="menu4">Laya产品</a></li>
                  <li><a href="#navbar_bottom"  data-url="navbar_bottom" data-lang="menu5">Laya游戏</a></li>
                  <li><a href="#wrap_conter" data-url="wrap_conter" data-lang="menu6">合作伙伴</a></li>
                </ul>

                <!-- 切换语言 -->
                <ul class="language nav navbar-nav navbar-right">
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        Language <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a  onclick="SelectLang('zh')" href="#">中文</a></li>
                      <li><a  onclick="SelectLang('en')"href="#">English</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
        </nav>
    </header>

    <!-- 轮播图 -->
    <div id="carousel-example-generic" class="carousel banner slide wow bounceIn" data-wow-delay="200ms" data-ride="carousel">
        <!-- 点 -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
      
        <!-- 图片部分 -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img class="img-responsive" src="./assets/images/1.jpg" />
          </div>
          <div class="item">
            <img class="img-responsive" src="./assets/images/2.jpg" />
          </div>
          <div class="item">
            <img class="img-responsive" src="./assets/images/3.jpg" />
          </div>
        </div>
      
        <!-- 左右按钮 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">左边</span>
        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">右边</span>
        </a>
    </div>

    <!-- LayaFlash 引擎 -->
    <div id="layaflash" class="layaflash wow slideInRight" data-wow-delay="200ms">
      <!-- 内容 -->
      <div class="container c_layaflash">
        <div class="row row_1">
          <div class="col-md-7">
            <!-- 大标题 -->
            <div class="row title">
              <h1  data-lang="newlist-title2">LayaFlash 引擎</h1>
              <p data-lang="pdd1">让Flash技术变成开发HTML5产品的利器</p>
            </div>
            <!-- 介绍说明1 -->
            <div class="row row_2">
              <div class="item col-md-5">
                <div class="item_img">
                  <img src="./assets/images/layaflash/LayaFlash01.png">
                </div>
                <div class="item_list">
                  <p class="txt_1" data-lang="pdd2">快速Flash产品转换</p>
                  <p class="txt_2" data-lang="pdd3">Flash页游\手游仅需1个人7天即可 转换为HTML5和APP游戏</p>
                </div>
              </div>
              <div class="col-md-1"></div>
              <div class="item col-md-5">
                <div class="item_img">
                  <img src="./assets/images/layaflash/LayaFlash02.png">
                </div>
                <div class="item_list">
                  <p class="txt_1" data-lang="pdd4">LayaFlash IDE</p>
                  <p class="txt_2" data-lang="pdd5">支持代码编译、调试、压缩与混淆 加密、资源转换、在线文档等功能</p>
                </div>
              </div>
            </div>
            <!-- 介绍说明2 -->
            <div class="row row_2">
              <div class="item col-md-5">
                <div class="item_img">
                  <img src="./assets/images/layaflash/LayaFlash03.png">
                </div>
                <div class="item_list">
                  <p class="txt_1" data-lang="pdd6">HTML5零学习成本</p>
                  <p class="txt_2" data-lang="pdd7">AS3开发者可直接使用Flash开源框架和工具链进行开发HTML5</p>
                </div>
              </div>
              <div class="col-md-1"></div>
              <div class="item col-md-5">
                <div class="item_img">
                  <img src="./assets/images/layaflash/LayaFlash04.png">
                </div>
                <div class="item_list">
                  <p class="txt_1" data-lang="pdd8">性能媲美APP</p>
                  <p class="txt_2" data-lang="pdd9">LayaFlash引擎的重度游戏已运行于QQ空间等平台，性能媲美APP</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 手机创意图 -->
          <div class="col-md-5 phone_img">
            <img src="./assets/images/layaflash/phone_img .png">
          </div>
        </div>
      </div>
    </div>

    <!-- Layabox 优势 -->
    <div id="layabox" class="layabox wow slideInRight" data-wow-delay="200ms">
      <div class="container c_layabox">
        <div class="row row_1">
          <!-- 奖杯创意图 -->
          <div class="col-md-5 achievement_img">
            <img src="./assets/images/layabox/achievement_img.png">
          </div>
          <!-- 介绍说明 -->
          <div class="col-md-7">
            <!-- 大标题 -->
            <div class="row title">
              <h1 data-lang="newlist-title">Layabox 优势</h1>
            </div>
            <!-- 内容 -->
            <div class="item">
              <div class="item_list">
                <div class="list_img">
                  <img src="./assets/images/layabox/Layabox01.png">
                </div>
                <p class="txt" data-lang="add1">快速上手，Flash程序员3小时掌握HTML5开发</p>
              </div>
              <div class="item_list">
                <div class="list_img">
                  <img src="./assets/images/layabox/Layabox02.png">
                </div>
                <p class="txt" data-lang="add2">4年优化打磨，LayaPlayer运行器性能媲美APP</p>
              </div>
              <div class="item_list">
                <div class="list_img">
                  <img src="./assets/images/layabox/Layabox03.png">
                </div>
                <p class="txt" data-lang="add3">超5亿的LayaPlayer移动设备安装量帮助CP发行</p>
              </div>
              <div class="item_list">
                <div class="list_img">
                  <img src="./assets/images/layabox/Layabox04.png">
                </div>
                <p class="txt" data-lang="add4">使用LayaFlash开发大型HTML5游戏的企业超100家</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Layabox产品家族 -->
    <div id="layaboxwork" class="layaboxwork wow slideInRight" data-wow-delay="200ms">
      <div class="container c_layaboxwork">
        <!-- 大标题 -->
        <div class="title" data-lang="newlist-title3">Layabox产品家族</div>
        <!-- 产品列表说明1 -->
        <div class="row row_1">
          <div class="col-md-1"></div>
          <div class="col-md-4 item">
            <div class="item_img">
              <img src="./assets/images/layaboxwork/Layaboxwork01.png">
            </div>
            <div class="item_list">
              <p class="txt_1" data-lang="acc1">LayaAir</p>
              <p class="txt_2" data-lang="acc2">核心库仅100K左右的新一代HTML5引擎，支 持AS3\TS\JS语言开发，支持2D\3D，非运行 器模式下性能媲美APP。</p>
            </div>
          </div>
          <div class="col-md-1"></div>
          <div class="col-md-4 item">
            <div class="item_img">
              <img src="./assets/images/layaboxwork/Layaboxwork02.png">
            </div>
            <div class="item_list">
              <p class="txt_1" data-lang="acc3">LayaPublish</p>
              <p class="txt_2" data-lang="acc4">Layabox发行业务，通过在H5产业链中的技术 桥梁优势，帮助CP获得流量支持。</p>
            </div>
          </div>
        </div>
        <!-- 产品列表说明1 -->
        <div class="row row_1">
          <div class="col-md-1"></div>
          <div class="col-md-4 item">
            <div class="item_img">
              <img src="./assets/images/layaboxwork/Layaboxwork03.png">
            </div>
            <div class="item_list">
              <p class="txt_1" data-lang="acc5">LayaFlash</p>
              <p class="txt_2" data-lang="acc6">使用Flash AS3语言开发H5的引擎框架，可直 接在FB或FD中开发、调试、编译H5，也可快 速将Flash页游\手游转换</p>
            </div>
          </div>
          <div class="col-md-1"></div>
          <div class="col-md-4 item">
            <div class="item_img">
              <img src="./assets/images/layaboxwork/Layaboxwork04.png">
            </div>
            <div class="item_list">
              <p class="txt_1" data-lang="acc7">LayaStore</p>
              <p class="txt_2" data-lang="acc8">嵌入式HTML5商城，APP只需嵌入20K的SDK 即可以获得托管式HTML5商店服务，进入流量 获利新时代。</p>
            </div>
          </div>
        </div>
        <!-- 产品列表说明1 -->
        <div class="row row_1">
          <div class="col-md-1"></div>
          <div class="col-md-4 item">
            <div class="item_img">
              <img src="./assets/images/layaboxwork/Layaboxwork05.png">
            </div>
            <div class="item_list">
              <p class="txt_1" data-lang="acc9">LayaPlayer</p>
              <p class="txt_2" data-lang="acc10">HTML5高速运行器，性能卓越、支持大型 HTML5游戏流畅运行，目前已植入QQ、百度 等20多家主流平台，安装量超5亿。</p>
            </div>
          </div>
          <div class="col-md-1"></div>
          <div class="col-md-4 item">
            <div class="item_img">
              <img src="./assets/images/layaboxwork/Layaboxwork06.png">
            </div>
            <div class="item_list">
              <p class="txt_1" data-lang="acc11">LayaOpen</p>
              <p class="txt_2" data-lang="acc12">Layabox开放平台，整合了Laya提供的各项运 营，管理服务的服务，提供给游戏提供商和互 联网渠道的统一开放平台。</p>
            </div>
          </div>
        </div>
      </div>
    </div>

      <!-- 游戏中心 -->
    <div class="navbar_bottom wow slideInRight" data-wow-delay="200ms" id="navbar_bottom">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="newlist4" id="newlist4">采用Layabox引擎的精彩游戏</div>
          </div>
          <div class="col-md-6 text_right">
            <p class="h4 text-right">更多</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-5">
            <video id="video" class="video" controls="" width="370px" height="200px">
              <!-- muted  静音 -->
              <source src="./assets/images//layacenter/50.mp4">
            </video>
          </div>
          <div class="col-md-7 navbar_house" >
            <div><a href="http://u.360.cn/lr2/"><img src="./assets/images/layacenter/pic1.png"><p class="h5">猎刃2</p></a></div>
            <div><a href="http://www.07073.com/h5/wy2550/?f=baidubs"><img src="./assets/images/layacenter/pic2.png"><p class="h5">上吧主公</p></a></div>
            <div><a href="http://zixia.yxfxg.com/gg/zxy-open/bdtgyw-zxy-pc-zxy"><img src="./assets/images/layacenter/pic3.png"><p class="h5">醉西游</p></a></div>
            <div><a href="http://4yx.910play.com/u35_4633_695?bd_vid=8689089315533742813"><img src="./assets/images/layacenter/pic4.png"><p class="h5">魔卡幻想</p></a></div>
            <div><a href="http://lewan.baidu.com/lewan?idfrom=5019&gameName=%E8%B6%85%E8%83%BD%E6%88%98%E9%98%9F&type=11&position=&gameId=164769206002905088"><img src="./assets/images/layacenter/pic5.png"><p class="h5">超能战队</p></a></div>
            <div><a href="https://www.9game.cn/dtdblgf/"><img src="./assets/images/layacenter/pic6.png"><p class="h5">刀塔大菠萝</p></a></div>
          </div>
          <div class="row navbar_row">
            <div class="col-md-7 navbar_tltle">
              <div><a href="http://66tg2.fmggames.cn:8088/66v2/?androidappid=105421&gid=0&channelid=262955&bd_vid=8915659878336902105"><img src="./assets/images/layacenter/pic7.png"><p class="h5">轰三国</p></a></div>
              <div><a href="http://www.07073.com/h5/wy2567/?f=baidubs"><img src="./assets/images/layacenter/pic8.png"><p class="h5">迷你猎人</p></a></div>
              <div><a href="https://www.duote.com/android/446933.html"><img src="./assets/images/layacenter/pic9.png"><p class="h5">萌挂三国</p></a></div>
              <div><a href="http://www.07073.com/h5/wy2780/"><img src="./assets/images/layacenter/pic10.png"><p class="h5">夺塔三国</p></a></div>
              <div><a href="https://www.18183.com/newgames/3252835.html"><img src="./assets/images/layacenter/pic11.png"><p class="h5">英雄争霸</p></a></div>
              <div><a href="https://m.diyiyou.com/zzzm/"><img src="./assets/images/layacenter/pic12.png"><p class="h5">战争之门</p></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <!--合作伙伴-->
    <div class="wrap_conter wow slideInRight" data-wow-delay="200ms" id="wrap_conter">
      <div class="container ">
        <div class="row">
          <div class="col-md-12 color_houser">
            <div class="newlist5" id="newlist5">合作伙伴</div>
            <p class="h5">(排序不分前后)</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 fixd_conter">
            <div><img src="./assets/images/wrap_conter/1-01.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-02.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-03.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-04.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-05.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-06.png" height="66" width="148"/></div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 fixd_conter">
            <div><img src="./assets/images/wrap_conter/1-07.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-8.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-09.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-10.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-11.png" height="66" width="148"/></div>
            <div><img src="./assets/images/wrap_conter/1-12.png" height="66" width="148"/></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 尾部 -->

    <div class="col-md-12 weibu wow fadeIn">
      <br>
      <div class="hezi">
        <div class="col-md-6 ziti">
          <span>公司简介</span>
          <span>联系方式</span>
          <span>人才招聘</span>
          <br>
          <br>
          <span>All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1 </span>
        </div>
        <br>

        <div class="col-md-6 erweima">
          <div class="tubiao3" id="an1"><img src="./assets/images/erweima/e3.png"></div>
          <div class="tubiao2" id="an2"><img src="./assets/images/erweima/e2.png"></div>
          <div class="tubiao1" id="an3"><img src="./assets/images/erweima/e1.png"></div>
        </div>
      </div>
    </div>

    <div class="tanchuang1">
      <img src="./assets/images/erweima/erweima.png">
    </div>
    <div class="tanchuang2">
      <img src="./assets/images/erweima/erweima.png">
    </div>
    <div class="tanchuang3">
      <img src="./assets/images/erweima/erweima.png">
    </div>

</body>
</html>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/wow.min.repeat.js"></script>
<script>
      new WOW().init();

      $(function(){  
      // a href == id 
      //锚点跳转滑动效果  获取 a 当中 href="#"  area href="#" 点击事件
      // a href="#newlist"
      $('a[data-url]').click(function() {  
          //是否重复点击自己
          if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) 
          {  
             //利用a链接href属性 来作为名称 去选中 元素中 id相同的元素   href = id
              var $target = $(this.hash);  

              $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');  

              if ($target.length) {  
                  var targetOffset = $target.offset().top;  
                  $('html,body').animate({  
                              scrollTop: targetOffset  
                          },  
                          1000);  
                  return false;  
              }  
          }  
      });  
  })
  $(".tubiao1").click(function(){
          $(".tanchuang1").css("display","block");
  })
  $(".tubiao1").mouseout(function(){
          $(".tanchuang1").css("display","none");
  })
  $(".tubiao2").click(function(){
          $(".tanchuang2").css("display","block");
  })
  $(".tubiao2").mouseout(function(){
          $(".tanchuang2").css("display","none");
  })
  $(".tubiao3").click(function(){
          $(".tanchuang3").css("display","block");
  })
  $(".tubiao3").mouseout(function(){
          $(".tanchuang3").css("display","none");
  })





  
  //设置默认语言 先要看缓存里面有没有设置
  var current = localStorage.getItem('lang')

  //判断是否存在
  if(!current)
  {
    ///设置一个默认的中文
    localStorage.setItem('lang','zh')
    var current = 'zh'
  }

  //一进来就触发中英文
  SelectLang(current)


  //获取所有的语言项目
  var $langlist = $("*[data-lang]")

  
  //切换中英文
  function SelectLang(lang)
  {
    //设置缓存(当前的语言)
    localStorage.setItem('lang',lang)

    //请求语言项文件
    $.ajax({
      url:`./assets/local/${lang}.json`,
      type:"POST",
      dataType:"json",
      success:function(success)
      {
        $langlist.each(function(){
          var langname = $(this).data("lang")
          var content = success[langname]

          console.log(langname,content)

          $(this).text(content)
        })
      }
    })
  }
</script>
</script>